import React, {useEffect, useState} from "react";
import {Card, List, Tooltip} from "antd";
import {listUserInterface} from "@/services/zoffyApi/userInterfaceController";
import message from "antd/es/message";
import indexStyle from "./index.less"
import {ShareAltOutlined} from "@ant-design/icons";
import {Link} from "umi";

const MyInterface: React.FC = () => {

  const [data, setData] = useState<API.UserInterfaceVo[]>();
  const loadData = async () => {
    const res = await listUserInterface();
    if (!res.data) {
      message.error("数据加载失败");
      return;
    }
    setData(res.data);
    console.log(res.data)
  }
  useEffect(() => {
    loadData();
  }, [])
  return (
    <>
      <List
        dataSource={data}
        grid={{
          column: 2,
          gutter: 14,
        }}
        renderItem={(item) => {
          return (
            <List.Item>
              <Card title={item.interfaceName}
                    actions={
                      [
                        <Tooltip title="在线调用" key="share">
                          <Link to={`/detailInterface/${item.interfaceId}`}>
                            在线调用
                          </Link>
                        </Tooltip>,
                        <Tooltip title="分享" key="share">
                          <ShareAltOutlined/>
                        </Tooltip>,
                      ]
                    }>
                <div className={indexStyle.cardInfo}>
                  <div>
                    <p>累计调用次数</p>
                    <p>{item.totalNum}</p>
                  </div>
                  <div>
                    <p>剩余调用次数</p>
                    <p>{item.leftNum}</p>
                  </div>
                </div>
              </Card>
            </List.Item>)
        }}
      />
    </>
  )
};
export default MyInterface;

